<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .Xbiaoti a:link{
            
            color: #cc9756;
            
        }
        .Xbiaoti a:visited{
            color: #cc9756;
        }
        .Xbiaoti a:hover{
            color: #ffff;
            text-decoration: none;
        }
        #title{
            width: 100%;
            height: 36px;
            background-color: #333;
        }
        #biaoti{
            width: 1090px;
            margin: 0 auto;
            height: 36px;
            display: flex;
            
        }
        .Xbiaoti{
            font-size: 12px;
        }
        .Xbiaoti img{
            vertical-align: middle;
            padding: 0px 8px 0px 0px;
        }
        .Szit{
            font-size: 12px;
            color: #CCC;
            display: flex;
            margin-left: 350px;
            align-items: center;
        }
        .Ssou{
            vertical-align: middle;
            margin: 0px 10px 0px 0px;
        }
        .Ssou a:link{
            color: #ccc;
            text-decoration: none;
        }
        .Ssou a:visited{
            color: #ccc;
        }
        .Ssou a:hover{
            color: #ffff;
            
        }
        .Ssou img{
            vertical-align: middle;
            padding: 0px 0px 0px 6px;
        }
        .Ssou1 img{
            vertical-align: middle;
            padding: 0px 6px 0px 0px;
        }
        .nav {
        width: 80px;
        margin: 0 auto;
        height: 36px;    
        
        }

        .nav li {
            width: 80px;
            height: 36px;
            line-height: 36px;
            /* background: #17adf3; */
            float: left;
            text-align: center;
            /* margin-left: 10px; */
            cursor: pointer;
            display: inline;
            position: relative;
        }

        li ul {
            position: absolute;
            /* top: 42px; 小bug */
            background-color: #FFFFFF;
            color: #CCCCCC;
            box-shadow: #ccc 2px 5px 5px;
            display: none;
        }

        #ul01 a:hover{
            color: #cc9756;

        }
        #ul02 a:hover{
            color: #cc9756;

        }

    </style>
    
</head>
<body>
    <div id="title">
        <div id="biaoti">
            <div>
                <div class="Xbiaoti" >
                    <img src="./static/layui/img/声音_填充.png" alt="" height="16px"><a href="#">因疫情影响，部分地区发货延迟通知</a>
                </div>
            </div>
            <div class="Szit">
                <div class="Ssou"><a href="#">登陆/注册</a></div>
                <div class="Ssou">|</div>
                <div class="Ssou"><a href="#">我的订单</a></div>
                <div class="Ssou">|</div>
                <div class="Ssou"><a href="#">会员</a></div>
                <div class="Ssou">|</div>
                <div class="Ssou"><a href="#">甄选家</a></div>
                <div class="Ssou">|</div>
                <div class="Ssou">
                    <ul class="nav">
                        <li id="qiy">
                            <span>
                                <a href="#">企业采购</a><img src="./static/layui/img/向下.png" alt="" height="10px">
                                <ul id="ul01">
                                    <li><a>企业购</a></li>
                                    <li><a>员工福利</a></li>
                                    <li><a>礼品卡</a></li>
                                    <li><a>联系我们</a></li>
                                </ul>
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="Ssou">|</div>
                <div class="Ssou">
                    <ul class="nav">
                        <li id="keh">
                            <a href="#">客户服务</a><img src="./static/layui/img/向下.png" alt="" height="10px">
                            <ul id="ul02">
                                <li><a>在线客服</a></li>
                                <li><a>帮助中心</a></li>
                                <li><a>商务合作</a></li>
                                <li><a>开放平台</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="Ssou">|</div>
                <div class="Ssou"><span class="Ssou1"><img src="./static/layui/img/手机.png" alt="" height="12"></span><a href="#">APP</a></div>
            </div>  
        </div>
    </div>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script src="./static/layui/layui.js"></script>
    <script>
        function fn(canshu1, canshu2) {
            var li01 = document.getElementById(canshu1);
            var ul01 = document.getElementById(canshu2);

            li01.onmouseover = function () {
                ul01.style.display = "block"
            }
            li01.onmouseout = function () {
                ul01.style.display = "none"
            }
            }
            fn("qiy", "ul01")
            fn("keh", "ul02")
            $(function(){
                
            })
   
    </script>
</body>
</html>
